<template>
    <div class="right">
            <div class="infoitem" v-for="(item,index) in rightinfolist" :key='index'>
            <a :href="item.link" >
                <img v-lazy='item.image' alt="">
                <p>{{item.title}}</p>
            </a>
            </div>
    </div>
</template>

<script>
export default {
    name:'categoryright',
    props:{
        rightinfolist:{
            type:Array,
            default:[]
        }
    }
}
</script>
<style scoped>
.right{
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: space-around;
    flex-wrap: wrap;
    top:45px;
    bottom:44px;
    right: 0;
    width:75%;
    background-color: white;
    overflow:scroll;
    /* height: 100vh; */
}
img{
    width:80px;
    height:80px;
}
.infoitem{
    flex: 1;
    text-align: center;
    /* height: 70px; */
}
</style>